<form nz-form [formGroup]="articleForm">
  <nz-tabset>
    <!-- 基本资料选项卡 -->
    <nz-tab [nzTitle]="BasicTabTitleTpl">
      <ng-template #BasicTabTitleTpl>
        <span>基本信息</span>
      </ng-template>

      <!-- 标题 -->
      <nz-form-item>
        <nz-form-label nzRequired nzFor="title">标题</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="标题" [(ngModel)]="article.title" formControlName="title">
          <nz-form-explain *ngIf="articleForm.get('title').dirty && articleForm.get('title').errors">
            <ng-container *ngIf="articleForm.get('title').errors['required']">此项为必填项！</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 发布人/机构 -->
      <nz-form-item>
        <nz-form-label nzRequired nzFor="publisher">发布人/机构</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="发布人/机构" [(ngModel)]="article.publisher" formControlName="publisher">
          <nz-form-explain *ngIf="articleForm.get('publisher').dirty && articleForm.get('publisher').errors">
            <ng-container *ngIf="articleForm.get('publisher').errors['required']">此项为必填项！</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 栏目信息 -->
      <nz-form-item>
        <nz-form-label nzFor="columnInfo">栏目信息</nz-form-label>
        <nz-form-control>
          <cloumn-parent-combo [isFindRoot]="'false'" placeholder="请选择栏目" [cloumnId]="article.columnInfoId"
            (selectedCloumnChange)="cloumnSelectedCloumnChange($event)"></cloumn-parent-combo>
        </nz-form-control>
      </nz-form-item>

      <!-- 文章来源 -->
      <nz-form-item>
        <nz-form-label nzFor="articleSourceInfoId">文章来源</nz-form-label>
        <nz-form-control>
          <article-source-combo placeholder="请选择文章来源" [articleSourceId]="article.articleSourceInfoId"
            (selectedArticleSourceChange)="articleSourceSelectedCloumnChange($event)"></article-source-combo>
        </nz-form-control>
      </nz-form-item>

      <!-- 发布时间 -->
      <nz-form-item>
        <nz-form-label nzFor="releaseTime">发布时间</nz-form-label>
        <nz-form-control>
          <nz-date-picker [(ngModel)]="releaseTime" [ngModelOptions]="{standalone: true}"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>

      <!-- 推荐类型 -->
      <nz-form-item>
        <nz-form-label nzFor="parent">推荐类型</nz-form-label>
        <nz-form-control>
          <enum-combo [enumId]="article.recommendedType" placeholder="请选择推荐类型" fullName="Magicodes.Admin.Contents.RecommendedTypes"
            (selectedValueChange)="typeSelectedValueChange($event)"></enum-combo>
        </nz-form-control>
      </nz-form-item>

      <!-- 链接 -->
      <nz-form-item>
        <nz-form-label nzFor="url">链接</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="链接" [(ngModel)]="article.url" [ngModelOptions]="{standalone: true}">
        </nz-form-control>
      </nz-form-item>

      <!-- 是否启用 -->
      <div nz-col nzSpan="24">
        <div nz-row>
          <div style="margin-bottom: 20px;" nz-col nzSpan="24">
            <label nz-checkbox name="isActive" [(ngModel)]="article.isActive" [ngModelOptions]="{standalone: true}">是否启用</label>
          </div>
        </div>
      </div>

      <!-- 是否需要授权 -->
      <div nz-col nzSpan="24">
        <div nz-row>
          <div style="margin-bottom: 20px;" nz-col nzSpan="24">
            <label nz-checkbox name="isAuthorization" [(ngModel)]="article.isNeedAuthorizeAccess" [ngModelOptions]="{standalone: true}">是否需要授权</label>
          </div>
        </div>
      </div>

      <!-- 是否为静态 -->
      <div nz-col nzSpan="24">
        <div nz-row>
          <div style="margin-bottom: 20px;" nz-col nzSpan="24">
            <label nz-checkbox name="isStatic" [(ngModel)]="article.isStatic" [ngModelOptions]="{standalone: true}">是否为静态属性(静态属性创建后无法删除)</label>
          </div>
        </div>
      </div>

    </nz-tab>

    <!-- SEO资料选项卡 -->
    <nz-tab [nzTitle]="SEOTabTitleTpl">
      <ng-template #SEOTabTitleTpl>
        <span>SEO信息</span>
      </ng-template>

      <!-- SEO标题 -->
      <nz-form-item>
        <nz-form-label>SEO标题</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="SEO标题" name="seoTitle" [(ngModel)]="article.seoTitle" [ngModelOptions]="{standalone: true}">
        </nz-form-control>
      </nz-form-item>

      <!-- 关键字 -->
      <nz-form-item>
        <nz-form-label>关键字</nz-form-label>
        <nz-form-control>
          <textarea rows="3" nz-input placeholder="关键字(多个以逗号隔开)" name="keyWords" [ngModelOptions]="{standalone: true}"
            [(ngModel)]="article.keyWords"></textarea>
        </nz-form-control>
      </nz-form-item>

      <!-- 简介 -->
      <nz-form-item>
        <nz-form-label>简介</nz-form-label>
        <nz-form-control>
          <textarea rows="3" nz-input placeholder="简介" name="introduction" [ngModelOptions]="{standalone: true}"
            [(ngModel)]="article.introduction"></textarea>
        </nz-form-control>
      </nz-form-item>

      <!-- 静态页路径 -->
      <nz-form-item>
        <nz-form-label>静态页路径</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="静态页路径" name="staticPageUrl" [(ngModel)]="article.staticPageUrl" [ngModelOptions]="{standalone: true}">
        </nz-form-control>
      </nz-form-item>

    </nz-tab>
  </nz-tabset>

</form>

<div class="drawer_footer">
  <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>取消</span></button>
  <button nz-button type="button" class="ant-btn ant-btn-primary" [nzLoading]="isLoadingBtn" (click)="submitForm()"><span>提交</span></button>
</div>